<template>
	<view>
		<form @submit="formSubmit">
			<view class="section" v-for="(item, index) in week" :key = "index">
				<view class="section_title">{{item}}</view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<checkbox-group :name="item">
						<checkbox value="第一节" :checked="tools.ifCheck(courseInfo.time[index], '第一节')">第一节</checkbox>
						<checkbox value="第二节" :checked="tools.ifCheck(courseInfo.time[index], '第二节')">第二节</checkbox>
						<checkbox value="第三节" :checked="tools.ifCheck(courseInfo.time[index], '第三节')">第三节</checkbox>
						<checkbox value="第四节" :checked="tools.ifCheck(courseInfo.time[index], '第四节')">第四节</checkbox>
						<checkbox value="第五节" :checked="tools.ifCheck(courseInfo.time[index], '第五节')">第五节</checkbox>
					</checkbox-group>
				</scroll-view>
			</view>
			<view class="section">
				<text class="section_title">课室</text>
				<input class="section_content" name="classRoom" :value="courseInfo.room" />
			</view>
			<button type="warn" class="deletButton" v-if="courseInfo.room && !schedule" @click="delectCourse">删除</button>
			<button form-type="submit" class="submitButton">确定</button>
		</form>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	export default {
		data() {
			return {
				week: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
				courseInfo: {
					_id: '',
					time: [],
					room: ''
				},
				delta: 2,
				classId: null,
				index: 0,
				schedule: false
			}
		},
		onLoad(e) {
			// 从选择课程页面进来
			if(e._id) this.courseInfo._id = e._id;
			// 通过点击已有课程 或 修改课表进来
			if(e.time) {
				let item = JSON.parse(e.time);
				console.log(item);
				this.courseInfo._id = item._id;
				this.courseInfo.time = item.time;
				this.courseInfo.room = item.room;
				this.delta = 1;
			}
			// 同样是编辑课程
			if(e.classId){
				// 编辑班级课程
				this.classId = e.classId;
				this.index = e.index;
			}
			// 是否编辑课表
			if(e.schedule) this.schedule = e.schedule;
		},
		/**
		 * 这里的修改功能，除了编辑课表是直接修改
		 * 其他的都是通过修改全局变量进行缓存，在返回addClass页面之后点击提交才进行持久化
		 */
		methods: {
			// 班级删除该课程
			delectCourse() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该课程吗',
					success(e) {
						console.log(e)
						if(e.confirm) {
							// 获取课程id 和 下标
							let courseId = that.courseInfo._id;
							let index = that.index;
							// 将内容放到全局变量中并返回删除
							getApp().globalData.courseId = courseId;
							getApp().globalData.index = index;
							getApp().globalData.delect = true;
							// 返回
							uni.showToast({
								title: '删除成功',
								duration: 1000
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					}
				})
			},
			formSubmit(res){
				if(res.detail.value.classRoom == ''){
					uni.showToast({
						title: '课室不能为空',
						duration: 1500
					});
					return false;
				}
				let index = 0;
				if(this.courseInfo.time == null){
					this.week.forEach(item=>{
						this.courseInfo.time.push(res.detail.value[item]);
					})
				}else{
					this.week.forEach(item=>{
						this.courseInfo.time[index++] = res.detail.value[item];
					})
				}
				this.courseInfo.room = res.detail.value.classRoom;
				// 将课表保存到全局变量中
				getApp().globalData.courseInfo = this.courseInfo;
				console.log(this.courseInfo);
				// 判断是返回还是直接修改课表
				if(this.schedule){
					// 修改课表
					db.collection('class').where({
						_id: this.classId
					}).update({
						courses:{
							[this.index]: this.courseInfo
						}
					}).then(res=>{
						console.log(res)
						if(res.updated == 1){
							uni.showToast({
								title: '修改成功',
								duration: 1000
							})
							getApp().globalData.ifFlush = true; // 标志位，需要重新查询课表
							setTimeout(()=>{
								uni.navigateBack({
									delta: 2
								});
							}, 1000)
						}
					})
				}else{
					uni.showToast({
						title: '选择成功',
						duration: 1000
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: this.delta
						})
					}, 1000)
				}
			}
		}
	}
</script>

<script module="tools" lang="wxs">
	function ifCheck(arr, str) {
		if(arr == null) return false;
		else return arr.indexOf(str) !== -1;
	}
	module.exports = {
		ifCheck: ifCheck
	}
</script>

<style>
	page{
		padding: 30rpx;
		background-color: #F3F5F7;
	}
	.section{
		display: flex;
		margin: 20rpx 0rpx;
	}
	.section_title{
		width: 120rpx;
		font-weight: bold;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: calc(95% - 120rpx);
		height: 90rpx;
	}
	checkbox{
		margin-right: 20rpx;
	}
	.deletButton{
		width: 70%;
		border-radius: 16rpx;
		margin-top: 60rpx;
	}
	.submitButton{
		background-color: #FD973F;
		color: #fff;
		border-radius: 16rpx;
		width: 70%;
		margin-top: 15rpx;
	}
	.section_content {
		width: calc(90% - 200rpx);
		background-color: #fff;
		border-radius: 16rpx;
		padding: 15rpx 0rpx;
		text-align: center;
		height: 40rpx;
		color: #555;
	}
</style>
